<template>
	<view class="loginBG" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="loging">
			<form>
				<view class="uni-form-item uni-column">
					<view class="title">用户名</view>
					<input type="text" :value="userData.name" placeholder="请输入用户名"
						@input="(e)=> {this.userData.name = e.target.value}" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">密码</view>
					<input type="password" :value="userData.password" placeholder="请输入密码"
						@input="(e)=> {this.userData.password = e.target.value}" />
				</view>
				<view class="uni-btn-v">
					<button type="default" class="login" @click="handleLogin()" :loading="loaing">登 录</button>
					<button type="default" class="register" @click="register()">注 册</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	import indexBackgroundImage from "@/static/loginBG1.png"
	export default {
		data() {
			return {
				indexBackgroundImage:indexBackgroundImage,
				userData: {
					
				},
				loaing: false,
			}
		},
		onLoad() {

		},
		methods: {
			register() {
				uni.navigateTo({
					url: '../Component/Register'
				})
			},
			iname(e) {
				this.userData.name = e.target.value
			},
			ipass(e) {
				this.userData.password = e.target.value
			},
			handleLogin() {
				console.log(this.userData)

				if (this.userData.name == "qqqqqq" && this.userData.password == "Qq123456") {
					this.loaing = true;
					setTimeout(() => {
						this.loaing = false;
						uni.switchTab({
							url: '/pages/Component/shop'
						});
					}, 500)
					uni.showToast({
						title: '登录成功！',
						icon: 'success',
						durati1on: 2000
					});

				} else {
					uni.showToast({
						title: '账号或密码错误！',
						icon: 'none',
						durati1on: 2000
					});
				}

			},
		}
	}
</script>

<style lang="scss" scope>
	.loginBG {
		height: 100%;
		width: 100%;

		.loging {
			opacity: 0.85;
			width: 500rpx;
			margin: 0 auto;
			position: relative;
			top: 25%;
			font-weight: bold;
			box-shadow: 3px 3px 9px #999;
			padding: 10rpx 30rpx;
			border-radius: 15rpx;
			background-color: #efeff4;

			.uni-form-item {
				input {
					height: 25px;
					padding: 7px 12px;
					line-height: 25px;
					font-size: 15px;
					background: #fff;
				}

				.title {
					padding: 20rpx 0;
				}
			}

			.uni-btn-v {
				height: 50px;
				padding-top: 10px;

				button {
					float: left;
				}

				.login {
					width: 50%;
					background-color: #007AFF;
					color: #FFFFFF;
				}

				.register {
					width: 40%;
					margin-left: 30rpx;
				}
			}
		}


	}
</style>
